<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
</head>
<body>
<div id="app">
    <input type="text" v-abs>
    <p v-pin:[asd]="zxc">东方卡农你温柔</p>
    <button @click="dianji">向左移动</button>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                asd:'top',
                zxc:200
            }
        },
       directives:{
            abs:{
                inserted(el){
                    // console.log(el)
                    el.focus();
                }
            },
           pin:{
                bind(el,binding,vNode){
                    el.style.position = 'fixed';
                    el.style[binding.arg] = `${binding.value}px`;
                },
               update(el,binding,vNode){
                    el.style[binding.arg] = `${binding.value}px`;
               }

           }
       },
        methods:{
            dianji(){
                this.asd = "left";
                this.zxc = 200;
            }
        }
    })
</script>
</body>
</html>